<template>
    <div v-loading="loading" :element-loading-delay="instanceInfo.length > 0 ? 120 : 0" class="console-page instance">
        <el-scrollbar style="width: calc(100% - 20px);height: calc(100% - 20px);padding: 10px;">
            <div v-for="(instanceItem, instanceIndex) in instanceInfo" :key="instanceIndex">
                <div class="instance-title" v-if="instanceInfo.length > 1">{{ instanceItem.instance }}</div>
                <div v-waterfall="380">
                    <el-card class="file cursor-default" v-for="(item, index) in instanceItem.InstanceSet" :key="index">
                        <template #header>
                            <div style="position: relative;">
                                <span style="padding-right: 10px;">实例ID:</span>
                                <span>{{ item.InstanceId }}</span>
                                <el-icon size="20" class="cursor-pointer firewall-icon"
                                    @click="intoFireWall(instanceItem.instance, item.InstanceId, item.InstanceName)">
                                    <component :is="getIcon('ChromeFilled')" />
                                </el-icon>
                                <el-icon size="20" class="cursor-pointer client-icon"
                                    @click="getVnc(instanceItem.instance, item.InstanceId, item.InstanceName)">
                                    <component :is="getIcon('Monitor')" />
                                </el-icon>
                            </div>
                        </template>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">实例名称:</el-col>
                            <el-col :span="16" class="instance-info" style="color: #1200ff;">
                                {{ item.InstanceName }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">操作系统:</el-col>
                            <el-col :span="16" class="instance-info">
                                {{ item.OsName }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">系统类型:</el-col>
                            <el-col :span="16" class="instance-info">
                                {{ capitalize(item.Platform) }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">配置信息:</el-col>
                            <el-col :span="16" class="instance-info">
                                <span>Cpu:</span>
                                <span>{{ item.CPU }}</span>
                                <span style="padding-right: 10px;">核</span>
                                <span>内存:</span>
                                <span>{{ item.Memory }}</span>
                                <span style="padding-right: 10px;">G</span>
                                <span>硬盘:</span>
                                <span>{{ item.SystemDisk.DiskSize }}</span>
                                <span>G</span>
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">区域信息:</el-col>
                            <el-col :span="16" class="instance-info">
                                {{ getRegion(item.Zone) }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">创建时间:</el-col>
                            <el-col :span="16" class="instance-info">
                                {{ new Date(item.CreatedTime).format("YYYY-MM-DD HH:mm:ss") }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">到期时间:</el-col>
                            <el-col :span="16" class="instance-info">
                                {{ new Date(item.ExpiredTime).format("YYYY-MM-DD HH:mm:ss") }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">实例状态:</el-col>
                            <el-col :span="16" class="instance-info">
                                {{ item.InstanceState }}
                            </el-col>
                        </el-row>
                        <el-row class="instance-item">
                            <el-col :span="8" class="instance-label">Ip地址:</el-col>
                            <el-col :span="16" class="instance-info">
                                <span>(公)</span>
                                <span style="padding-right: 10px;">{{ item.PublicAddresses.join(",") }}</span>
                                <span>(内)</span>
                                <span>{{ item.PrivateAddresses.join(",") }}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { useRequest, useElMessage, useElLoading } from "@usehook"
import { onMounted } from "vue"
import { getIcon } from "@/utils/tools"
import storeInstance from "@/pinia"
import router from "@/router"

const { tagMenuStore } = storeInstance

let instanceInfo = $ref([])
let loading = $ref(false)

const getData = () => {
    loading = true
    useRequest("/tencentCloud/describeInstance").then(resp => {
        if (resp && resp.status) {
            instanceInfo = resp.data
        }
    }).catch((error) => {
        if (error.message) useElMessage.error(error.message)
    }).finally(_ => {
        loading = false
    })
}

const regionMap = {
    "chengdu": "成都",
    "guangzhou": "广州",
    "beijing": "北京",
    "nanjing": "南京",
    "hangzhou": "杭州",
    "shanghai": "上海",
    "shenzhen": "深圳"
}
const getRegion = (v) => {
    const split = v.split("-")
    const region = split[1]
    const number = split[2]
    return `${regionMap[region]}${number}区`
}

const intoFireWall = (instance, instanceId, instanceName) => {
    let index = "/tencentCloud/instance/firewall"
    tagMenuStore.setTitle(instanceName)
    const query = { instance, instanceId }
    router.push({ path: index, query })
}

const getVnc = (instance, instanceId) => {
    const loading = useElLoading({ text: "正在获取登录地址", target: ".console-page" })
    useRequest("/tencentCloud/instanceVncUrl", { instance, instanceId }).then(resp => {
        if (resp && resp.status && resp.data.InstanceVncUrl) {
            loading.setText("即将打开vnc登陆页面")
            setTimeout(() => {
                window.open("https://img.qcloud.com/qcloud/app/active_vnc/index.html?InstanceVncUrl=" + resp.data.InstanceVncUrl)
            }, 500);
        }
    }).finally(_ => {
        setTimeout(() => {
            loading.close()
        }, 500);
    })
}

const capitalize = (str) => {
    // 使用正则表达式匹配每个单词的首字母，并在回调函数中将其转换为大写
    return str?.charAt(0).toUpperCase() + str?.slice(1).toLowerCase()
}

onMounted(() => {
    getData()
})
</script>

<style>
.instance .instance-item+.instance-item {
    padding-top: 15px;
}

.instance .instance-label {
    text-align: right;
    max-width: 120px;
    padding-right: 10px;
}

.instance .instance-info {
    max-width: calc(100% - 120px);
    min-width: calc(100% - 120px);
}

.instance .el-card__body {
    padding: 10px 10px 10px 0;
}

.instance .el-card__header {
    padding: 13px 15px;
}

.instance .firewall-icon {
    position: absolute;
    right: 0;
}

.instance .client-icon {
    position: absolute;
    right: 40px;
}

.instance .instance-title {
    font-size: calc(var(--font-size) + 5px);
    padding-bottom: 10px;
}
</style>